<template>
  <div class="Swiper">
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in list" :key="item.id">
              <img :src="item.imgUrl" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
  </div> 
</template> 
 
<script>
  import '@/common/swiper-bundle.min.css'
  import Swiper from '@/common/swiper-bundle.min.js'
  export default {
    name: "Swiper",
    data() {
      return {
        list: this.swiperList
      } 
    },
    props:['swiperList'],
    mounted() {
      new Swiper('.swiper', {  
        loop: true, 
        autoplay: true,
        
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        
        
      });
    }
  }
</script>

<style scoped lang="less">
.Swiper {
  width: 100%;
  margin: .2rem 0;
  overflow: hidden;
  .swiper {
    width: 100%;
    position: relative;
  }
}

</style>